<template>
  <div>
    <div class="box">
      <div class="col" ref="col1">
        <transition-group name="myfade"  tag="div" key="list1">
            <div
              class="item"
              v-for="item in dataList1"
              :key="item.text"
              :style="{ height: item.height+'px' }"
            >
              {{ item.text }}
            </div>
        </transition-group>
      </div>
     <div class="col" ref="col2">
        <transition-group name="myfade" tag="div" key="list2">
            <div
              class="item"
              v-for="item in dataList2"
              :key="item.text"
              :style="{ height: item.height+'px' }"
            >
              {{ item.text }}
            </div>
        </transition-group>
      </div>
      <div class="col" ref="col3">
        <transition-group name="myfade" tag="div" key="list3">
            <div
              class="item"
              v-for="item in dataList3"
              :key="item.text"
              :style="{ height: item.height+'px' }"
            >
              {{ item.text }}
            </div>
        </transition-group>
      </div>
      <div class="col" ref="col4">
        <transition-group name="myfade" tag="div" key="list4">
            <div
              class="item"
              v-for="item in dataList4"
              :key="item.text"
              :style="{ height: item.height+'px' }"
            >
              {{ item.text }}
            </div>
        </transition-group>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mainMenuList: [],
      dataList1: [],
      dataList2: [],
      dataList3: [],
      dataList4: [],
    };
  },
  mounted() {
    let arr = this.randomArr();
    this.mainMenuList = arr;
    this.$nextTick(() => {
        this.mountMenu();
    });
  },
  methods: {
    randomArr() {
      let length = 50;
      let arr = [];
      for (let i = 0; i <= length; i++) {
        let height = Math.random() * 50 + 10;
        arr.push({
          height,
          text: i,
        });
      }
      console.log(arr);
      return arr;
    },
    mountMenu(arg) {
      var temp = this.mainMenuList;
      var index = arg || 0;
      var refName = this.selectCol();
      if (temp.length > index) {
        this[refName].push(this.mainMenuList[index]);
        this.$nextTick(() => {
            setTimeout(()=>{
                this.mountMenu(index + 1);
            },1000)
          
        });
      }
    },
    selectCol() {
      var getHeight = (ref) => {
        return this.$refs[ref].offsetHeight;
      };
      var height1 = getHeight("col1");
      var height2 = getHeight("col2");
      var height3 = getHeight("col3");
      var height4 = getHeight("col4");
      console.log(height1, height2, height3, height4);
      switch (Math.min(height1, height2, height3, height4)) {
        case height1:
          return "dataList1";
          break;
        case height2:
          return "dataList2";
          break;
        case height3:
          return "dataList3";
          break;
        case height4:
          return "dataList4";
          break;
        default:
          return "dataList1";
          break;
      }
    },
  },
};
</script>
<style lang='scss' scoped>
.box {
    // column-count: 4;
  .col {
    float: left;
    width: 20%;
    .item {
        background-color: #ccc;
        margin-bottom: 10px;
    }
  }
}
/* 效果过程 */
.myfade-enter-active,
.myfade-leave-active {
  transition: all 0.8s linear;
}
/* 进场的瞬间与离场的效果添加 */
.myfade-enter,
.myfade-leave-to {
  opacity: 0;
  transform: translateY(-100%);
}
</style>